<template>
  <div class="video-upload-container">
    <el-button icon="el-icon-upload" size="mini" type="primary" @click="upload.showUpload=true">插入视频</el-button>
    <Upload
        v-if="upload.showUpload"
        ref="upload"
        :accept="upload.accept"
        :limit="1"
        :show-chunks="true"
        :multiple="false"
        :chunk-size="upload.chunksize"
        :is-oss="$parent.isOss"
        @close="upload.showUpload = false"
        @success="uploadSuccess"
    >
      <div slot="tip" class="upload-tip">
        <i class="el-icon-info" />
        :
        只能上传：视频文件
      </div>
    </Upload>
  </div>
</template>

<script>
import Upload from '@/components/VideoUpload'
export default {
  name: 'EditorSlideUpload',
  components: { Upload },
  data() {
    return {
      view: '/API-DOCUMENT/document/file/download?id=',
      upload: {
        showUpload: false,
        accept: 'video/mp4',
        chunksize: 10 * 1024 * 1024,
        file: ''
      }
    }
  },
  methods: {
    uploadSuccess(idorurl, files) {
      if (idorurl) {
        if (this.$parent.isOss && sessionStorage.getItem('FILE_SAVE_THIRD_CONFIG')) {
          this.$emit('successVideoCBK', idorurl)
        } else {
          this.$emit('successVideoCBK', this.view + idorurl)
        }
        this.upload.showUpload = false
      }
    }
  }
}
</script>
<style lang="scss">
.video-upload-container {
  position: relative;
  .browser-upload-main {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
  }
}
#editor-dialog {
  .el-dialog__header {
    border: 0 none !important;
  }
  .el-dialog__body {
    padding: 30px 20px;
  }
}
</style>
